<!--
 * @Author: lucky
 * @Date: 2021-06-29 16:47:16
 * @LastEditors: Mogy
 * @LastEditTime: 2021-07-03 20:14:09
 * @Description: 
-->

<template>
  <div class="body">
    <div class="head">
      <span>订 单</span>
    </div>
    <van-tabs @click="onClick" v-model="active">
      <van-tab title="全部" name="全部"></van-tab>
      <van-tab title="待接单" name="待接单"></van-tab>
      <van-tab title="待服务" name="待服务"></van-tab>
      <van-tab title="已完成" name="已完成"></van-tab>
    </van-tabs>
    <!-- 订单卡片 -->
    <div class="cards">
      <transition-group name="van-slide-left">
        <div
          class="cards-item"
          v-for="item in orderData"
          :key="item.id"
          v-show="visible"
          @click="toPath(item.id)"
        >
          <div class="cards-items" v-if="item.status == '待接单'">
            <div class="image">
              <img :src="item.customer.userFace" alt />
            </div>
            <div class="userInfo">
              <div class="userInfo_name">{{item.customer.username}}</div>
              <div
                class="userInfo_address"
              >{{item.address.province+item.address.area+item.address.city+item.address.address}}</div>
              <div class="userInfo_time">{{moment(item.serviceTime).format('YYYY-MM-DD hh:mm')}}</div>
              <div class="userInfo_status">
                <van-tag type="warning" plain>{{item.status}}</van-tag>
              </div>
            </div>
          </div>
          <div class="cards-items" v-if="item.status == '待服务'">
            <div class="image">
              <img :src="item.customer.userFace" alt />
            </div>
            <div class="userInfo">
              <div class="userInfo_name">{{item.customer.username}}</div>
              <div
                class="userInfo_address"
              >{{item.address.province+item.address.area+item.address.city+item.address.address}}</div>
              <div class="userInfo_time">{{moment(item.serviceTime).format('YYYY-MM-DD hh:mm')}}</div>
              <div class="userInfo_status">
                <van-tag plain type="danger">{{item.status}}</van-tag>
              </div>
            </div>
          </div>
          <div class="cards-items" v-if="item.status == '已完成'">
            <div class="image">
              <img :src="item.customer.userFace" alt />
            </div>
            <div class="userInfo">
              <div class="userInfo_name">{{item.customer.username}}</div>
              <div
                class="userInfo_address"
              >{{item.address.province+item.address.area+item.address.city+item.address.address}}</div>
              <div class="userInfo_time">{{moment(item.orderTime).format('YYYY-MM-DD hh:mm')}}</div>
              <div class="userInfo_status">
                <van-tag plain type="success">{{item.status}}</van-tag>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { pageQuery } from "@/api/order";
import { getId } from "@/utils/auth";
export default {
  data() {
    return {
      moment,
      active: "",
      orderData: [],
      params: {
        page: 1,
        pageSize: 10,
        status: null,
        employeeId: 0,
      },
      visible: false,
    };
  },
  computed: {},
  methods: {
    onClick(name, title) {
      if (name !== "全部") {
        this.params.status = name;
      } else {
        this.params.status = null;
      }
      this.pageQueryData();
    },
    async pageQueryData() {
      let res = await pageQuery(this.params);
      this.orderData = res.data.list;
    },
    toPath(id) {
      // console.log(id);
      this.$router.push({
        path: "/oreder_deatils",
        query: { id },
      });
    },
  },
  created() {
    this.params.employeeId = getId();
    this.pageQueryData();
    this.visible = true;
  },
  mounted() {},
};
</script>
<style scoped>
.body {
  width: 100%;
  height: 617px;
  /* overflow: scroll; */
}
.head {
  height: 50px;
  background-color: #6699ff;
  font-family: "华文琥珀";
  text-align: center;
}
.head > span {
  color: black;
  font-size: 18px;
  line-height: 50px;
}
.cards {
  padding: 10px;
  height: 520px;
  overflow: scroll;
  /* margin-top: 20px; */
  padding-bottom: 30px;
}
.cards-item {
  margin-bottom: 20px;
}

.cards-items {
  margin: 0 auto;
  height: 130px;
  width: 350px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  position: relative;
}

.image {
  position: absolute;
  height: 100px;
  width: 100px;
  left: 20px;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.userInfo {
  position: absolute;
  left: 130px;
  height: 100px;
  width: 210px;
  /* background-color: silver; */
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.userInfo .userInfo_name {
  font-size: 18px;
  font-weight: bold;
}

.userInfo .userInfo_status {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 13px;
}

.userInfo .userInfo_address {
  font-size: 13px;
  color: #666;
}

.userInfo .userInfo_time {
  font-size: 13px;
}

.userInfo > div {
  margin-bottom: 13px;
}

.image > img {
  border-radius: 50%;
  height: 100%;
  width: 100%;
}
</style>